<template>
    <div class="operate-log">
        <div class="Ptitle">客户间关系设置</div>
        <!-- 查询表单 start -->
        <ui-form :model="queryForm" class="query-form" style="display: flex;flex-wrap: wrap;">
            <ui-form-item label="客户类型">
                <ui-select v-model="queryForm.types" placeholder="请选择潜客类型">
                    <ui-option :value="0" label="成功"></ui-option>
                    <ui-option :value="1" label="失败"></ui-option>
                </ui-select>
            </ui-form-item>
            <ui-form-item label="管理类型">
                <ui-select v-model="queryForm.types" placeholder="请选择所属机构">
                    <ui-option :value="0" label="成功"></ui-option>
                    <ui-option :value="1" label="失败"></ui-option>
                </ui-select>
            </ui-form-item>
            <ui-form-item label="客户等级">
                <ui-select v-model="queryForm.types" placeholder="请选择潜客状态">
                    <ui-option :value="0" label="成功"></ui-option>
                    <ui-option :value="1" label="失败"></ui-option>
                </ui-select>
            </ui-form-item>
            <ui-form-item label="客户姓名">
                <ui-input type="text" placeholder="请输入客户姓名" v-model="queryForm.searchName"> </ui-input>
            </ui-form-item>
            <ui-form-item label="证件号码">
                <ui-input type="text" placeholder="请输入证件号码" v-model="queryForm.searchName"> </ui-input>
            </ui-form-item>
            <ui-form-item label="联系电话">
                <ui-input type="number" placeholder="请输入联系电话" v-model="queryForm.searchName"> </ui-input>
            </ui-form-item>
            <ui-form-item>
                <ui-button class="primary-btn" @click="searchList(true)" icon="ui-icon-search">查询</ui-button>
                <ui-button class="default-btn" @click="reset" icon="ui-icon-refresh-right">重置</ui-button>
            </ui-form-item>
        </ui-form>
        <!-- 查询表单 end -->
        <!-- 数据表格 start -->
        <div class="Ptitle2">客户列表</div>
        <vx-nodata :list="tableData" v-loading="isLoading" sub-title="暂无数据">
            <!-- 表格 -->
            <vx-table :tableData="tableData" :isSelect="false" :columns="columns" :buttomGroup="buttomGroup"
                @updatae="updatae"></vx-table>
            <!-- 表格完 -->
            <ui-pagination :total="total" :page-size="pageSize" :current-page="currentPage" :layout="layout"
                :page-sizes="pageSizeList" @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </ui-pagination>
        </vx-nodata>
        <!-- 数据表格 end -->
    </div>
</template>
    
<script>
import poerateLogApi from '@/api/operate-log';
import pagination from '@/common/mixin/pagination.js'; // 混入/分页
import vxTable from '@/components/vx-table';
export default {
    name: 'AccountRelation',
    mixins: [pagination],
    data() {
        return {
            queryForm: {
                operTime: [],
                types: '',
                searchName: ''
            }, // 查询表单
            operatorType: [], // 操作类型列表
            tableData: [{ updatedBy: 222 }], // 列表数据
            isLoading: false, // 查询列表loading
            layout: 'prev, pager, next, total',
            columns: [
                {
                    prop: 'updatedBy',
                    label: '序号',
                    width: '50',
                    fixed: true
                },
                {
                    prop: 'userName',
                    label: '客户号',
                },
                {
                    prop: 'userName',
                    label: '客户名称',
                }, {
                    prop: 'updatedBy',
                    label: '客户类型',
                },
                {
                    prop: 'updatedBy',
                    label: '管户机构',
                },
                {
                    prop: 'updatedBy',
                    label: '金融资产',
                },
                // {
                //     prop: 'createdBy',
                //     label: '3',
                //     formatter: (row, column, cellValue, index) => {
                //         return wordcut(cellValue, 3, 4);
                //     }
                // }
            ], //表头
            buttomGroup: [
                { label: '维护', methodsName: 'updatae', width: '200' },
            ] // 操作按钮
        };
    },
    components: {
        vxTable
    },
    created() {

    },
    methods: {
        /**
         * 获取详情
         * @param {object} value 当前列表数据
         */
        subDetail(value) {
        },
        /**
         * 查询操作日志
         * @param {boolean} val 是否重置当前页签
         */
        async searchList(val) {

        },
        /**
         * 重置
         */
        reset() {
            this.queryForm = { operTime: [] };
            this.currentPage = 1;
            this.searchList();
        },
        // 维护跳转
        updatae(val) {
            console.log(val)
            this.$router.push({
                path: '/AccountManager/AccountRelation_info',
            })
        },
    },
};
</script>
    
<style lang="scss" scoped>
.operate-log {

    .ui-icon-plus,
    .ui-icon-search {
        color: #fff;
    }

    .vx-dialog.ui-dialog {
        width: 750px;
    }

    .success {
        color: $color-success;
    }

    .error {
        color: $color-danger;
    }

    .Ptitle {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 40px;
    }

    .Ptitle2 {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 40px;
        margin-top: 40px;
    }
}
</style>
    